<template>
  <Card>
    <p slot="title">近30天消防关注指数变化情况</p>
    <div class="chart" id="chart-index-trend"></div>
    <Spin v-show="loading" fix size="large" />
  </Card>
</template>

<script>
import axios from "axios";
export default {
  name: "",
  data() {
    return {
      loading: false,
      option: null
    };
  },
  methods: {
    renderChart() {
      this.loading = true;
      var axisData = [];
      for(let i=0;i<30;i++){
          let index = -1
          axisData.push(this.dateShift(i*index));
      }
      this.option = {
        grid: {
          top: 20,
          left: 20,
          right: 40,
          bottom: 40,
          containLabel: true
        },
        tooltip: {
          show: true,
          trigger: "item",
          axisPointer: { type: "shadow" }
        },
        xAxis: {
          type: "category",
          data: axisData,
          axisLine: { show: true },
          axisLabel: { show: true, color: "#444", fontSize: 12 },
          splitLine: { show: true, color: "#00000020" },
          splitArea: { show: true, color: "#00000012" }
        },
        yAxis: {
          type: "value",
          axisLine: { show: true },
          axisLabel: { show: true, color: "#444", fontSize: 12 },
          splitLine: { show: true, color: "#00000020" },
          splitArea: { show: true, color: "#00000012" }
        },
        series: [
          {
            name: "指数变化",
            type: "line",
            itemStyle: {
              normal: {
                color: this.COLORS[3],
                show: true
              }
            },
            lineStyle: {
              color: this.COLORS[3],
              width: 3,
              shadowColor: "#00000050",
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowOffsetY: 3
            },
            areaStyle: {
              color: this.COLORS[3] + "50"
            },
            data: axisData.map(o=>{
                return 0
            })
          }
        ]
      };
      this.$Crender("chart-index-trend", this.option);
      this.loading = false;
    }
  },
  mounted() {
    this.renderChart();
  }
};
</script>

<style scoped>
.chart {
  height: 720px;
}
</style>